<template>
	<view>
		<view class="search">
			<u-search
				height="65rpx"
				bgColor="#f8f8f8"
				placeholder="商品搜索"
				:disabled="false"
				v-model="params.search"
				@search="searchGoods"
				:showAction="false"
			></u-search>
 
			<view class="mallType">
				<view
					class="mallType_item"
					v-for="(item, index) in typeList"
					:key="index"
					@click="setActive(item, index)"
				>
					<view
						v-if="item.text"
						:style="{
							color: item.actived ? '#1786f8' : '#0A0B0C'
						}"
					>
						{{ item.text }}
					</view>
					<template v-if="item.text === '价格'">
						<image
							src="/static/image/price.png"
							v-if="showIcon === 1"
						></image>
						<image
							src="/static/image/price_acs.png"
							v-if="showIcon === 2"
						></image>
						<image
							src="/static/image/price_desc.png"
							v-if="showIcon === 3"
						></image>
					</template>
				</view>
			</view>
		</view>

		<view class="u-page">
			<u-list @scrolltolower="scrolltolower" @scroll="scroll">
				<u-list-item v-for="(item, index) in list" :key="index">
					<view class="goods-item">
						<!-- {{ item.title }} -->
						<view class="section" @tap="goToGoods(item.id)">
							<!-- <image class="image" :src="item.image[0]"></image> -->
							<image class="image" :src="'https://images.weserv.nl/?url=' + item.image[0]"   mode="aspectFill"></image>
							<view class="goods_info">
								<view class="name">
									<u--text
										:lines="2"
										:text="item.title"
										style="font-size: 32;"
									></u--text>
								</view>
								<view class="price">
									<view class="buy_price">
										<!-- <view class="line_price">
											￥99999
										</view> -->
										<view class="vip_price">
											￥{{ item.price }}
										</view>
									</view>
									<view class="buy_btn" @click.stop="">
										
										<!-- <u-number-box
											slot="right-icon"
											v-model="item.value"
											step="1"
											:min="0"
											:showMinus="item.value > 0"
										>
											<view slot="minus" class="minus">
												<u-icon
													name="minus"
													size="10"
												></u-icon>
											</view>
											<text
												slot="input"
												style="text-align: center"
												class="input"
											>
												<text v-if="item.value>0">{{ item.value || 0 }}</text>
											</text>
											<view slot="plus" class="plus" @click="addcart(item.id)">
												<u-icon
													name="plus"
													color="#FFFFFF"
													size="10"
												></u-icon>
											</view>
										</u-number-box> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-list-item>

				<u-loadmore
					:status="loadmoreStatus"	
					loadingText="努力加载中"
					loadmoreText="轻轻上拉"
					nomoreText="沒有更多了"
				/>
			</u-list>
		</view>
		
		<!-- <view v-if="showMall">商品加载中，请稍等...</view> -->
	</view>
</template>

<script>
import { products } from '../../api/base';
import { addcart } from '@/api/shopcart' 
export default {
	data() {
		return {
			total: 0,
			params: {
				page: 1,
				per_page: 20,
				search: '',
				order: ''
			},
			loadmoreStatus: 'loadmore',
			showIcon: 1,
			typeList: [{ text: '综合' ,actived:true}, { text: '销量' }, { text: '价格' }],
			total_page: 0,
			list: [],
			isLogin:false
		};
	},
	onLoad(opt) {
		console.log(opt);
		this.params.search = opt.keyword;
		this.getList();
	},
	onShow() {
		if(uni.getStorageSync('userInfo')){
			this.isLogin = true
		}else{
			this.isLogin = false
		}
	},
	methods: {
		scrolltolower() {
			console.log('触发');
			this.getList();
		},
		initList() {
			this.params.page = 1;
			this.list = []; 
		},
		searchGoods() {
			this.initList();
			this.getList(); 
		},
		addcart(id){
			if(this.isLogin == true){
				addcart({
					sku_id:id,
					amount:1
				}).then(res => {
					if(res.status == 200){
						uni.showToast({
							title:'加入购物车成功'
						})
					}
				})
			}else{
				this.loginModal()
			}
			// addcart({
			// 	sku_id:id,
			// 	amount:1
			// }).then(res => {
			// 	// uni.showToast({
			// 	// 	title:res.message
			// 	// })
			// })
		},
		setActive(data, index) {
			// console.log(data,'data')
			this.typeList.forEach((item, i) => {
				if (index === i) {
					if (data.text === '价格') {
						if (this.showIcon < 3) {
							this.showIcon++;
							this.showIcon = 3
							this.$set(item, 'actived', true);
							this.params.order = 'price_desc'
						} else if(this.showIcon == 3) {
							this.showIcon = 2;
							this.$set(item, 'actived', true);
							this.params.order = 'price_asc'
						} 
					} else {
						this.$set(item, 'actived', true);
						this.showIcon = 1;
						if(data.text === '销量'){
							this.params.order = 'sold_count_desc'
						}else{
							this.params.order = ''
						}
					}
				} else {
					this.$set(item, 'actived', false);
				}
			});
			this.initList();

			this.getList();
		},
		scroll(e) {
			// console.log(e, '滚动'); 
		},
		getList() {
			this.loadmoreStatus = 'loading';
			products(this.params).then((res) => {
				// if (this.params.page > res.data.current_page) return;
				this.total = res.data.total || 0;

				if (this.list.length < res.data.total) {
					if (this.params.page == 1) {
						this.list = res.data.data;
						this.params.page += 1;
					} else {
						this.list = [...this.list, ...res.data.data];
						this.params.page += 1;
					}
					if (res.data.data.length < this.params.per_page) {
						this.loadmoreStatus = 'nomore';
					} else {
						this.loadmoreStatus = 'loadmore';
					}
				} else {
					this.loadmoreStatus = 'nomore';
				}
			});
		},
		// 跳转至商品详情页
		goToGoods(i){
			uni.navigateTo({
				url:`/mallPage/goodsInfo/goodsInfo?id=${i}`
			})
		},
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	width: 86vw;
	background-color: #fff;
	margin: 20rpx auto 0;
	height: 180rpx;
	padding: 20rpx 30rpx 30rpx 30rpx; 
	border-radius: 20rpx;
}
.section {
	display: flex;
	.goods_info {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.name {
			width: 420rpx;
		}
		
		.price {
			width: 420rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			.buy_price{
				.vip_price {
					font-size: 30rpx;
					color: #1786f8;
				}
				.line_price {
					text-decoration: line-through;
					color: #aaa;
				}
			}
		
			.buy_btn {
				margin-top: 30rpx;
				.minus {
					width: 20px;
					height: 20px;
					border: 2px solid #1786f8;
					border-radius: 50%;
					@include flex;
					justify-content: center;
					align-items: center;
				}
		
				.input {
					padding: 0 10px;
					font-size: 26rpx;
				}
				.plus {
					width: 20px;
					height: 20px;
					background-color: #1786f8;
					border: 2px solid #1786f8;
					border-radius: 50%;
					@include flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	image {
		height: 190rpx;
		width: 190rpx;
		min-width: 150rpx;
		border-radius: 10rpx;
	}	
}
					
.search {
	padding: 10rpx 30rpx 30rpx 30rpx;
	background-color: #fff;
}
.mallType {
	display: flex;
	justify-content: space-between;
	padding-top: 20rpx;
	.mallType_item {
		font-size: 24rpx;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		& image {
			margin-left: 8rpx;
			width: 25rpx;
			height: 25rpx;
		}
	}
}
</style>
